import React from 'react';
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { type RowType } from '@/api/user';
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
import { type TablePaginationConfig } from '..'

type TableListProps = {
  loading: boolean
  tableData: RowType[]
  onEdit: (row: RowType) => void
  onTable: (pagination: TablePaginationConfig) => void
}

const TableList: React.FC<TableListProps> = ({ tableData, loading, onEdit, onTable }) => {
  const columns: TableProps<RowType>['columns'] = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
  
    {
      title: '学历',
      dataIndex: 'education',
      key: 'education',
    },
    {
      title: '收入范围',
      dataIndex: 'receive',
      key: 'receive',
    },
    {
      title: '职业',
      dataIndex: 'career',
      key: 'career',
    },
    {
      title: '所属地区',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: '爱好',
      dataIndex: 'hobby',
      key: 'hobby',
    },
    {
      title: '手机号',
      dataIndex: 'phoneNumber',
      key: 'phoneNumber',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    // {
    //   title: 'Tags',
    //   key: 'tags',
    //   dataIndex: 'tags',
    //   render: (_, { tags }) => (
    //     <>
    //       {tags.map((tag) => {
    //         let color = tag.length > 5 ? 'geekblue' : 'green';
    //         if (tag === 'loser') {
    //           color = 'volcano';
    //         }
    //         return (
    //           <Tag color={color} key={tag}>
    //             {tag.toUpperCase()}
    //           </Tag>
    //         );
    //       })}
    //     </>
    //   ),
    // },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type='link' icon={<FormOutlined />} onClick={() => onEdit(record)}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />} onClick={() => onDel(record)}>删除</Button>
        </Space>
      ),
    },
  ];


  const onDel = (record: RowType) => {
    console.log(record)
  }

  return (
    <>
      <Table
        rowKey='id'
        columns={columns}
        dataSource={tableData}
        loading={loading}
        onChange={(pagination) => onTable(pagination)}
      />
    </>
  )
}

export default TableList;